<template>
  <!--  户表用量统计页面-->
  <div class="app-container">
    <el-row style="width: 100%; height: 100%; margin: 0" :gutter="10">
      <!--区域数据-->
      <el-col :span="4" style="height: 100%; padding-left: 0">
        <div style="background-color: #ffffff; height: 100%; padding: 10px">
          <el-input
            placeholder="输入关键字进行过滤"
            clearable
            size="mini"
            suffix-icon="el-icon-search"
            style="width: 100%"
            v-model="filterText"
          />
          <div
            style="
              height: 96%;
              max-height: 96%;
              overflow-y: auto;
              margin-top: 10px;
            "
            class="treeCont"
          >
            <el-tree
              :data="sheetsTreeList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="sheetsCode"
              :default-expanded-keys="defaultExpandedKeys"
              highlight-current
              v-loading="treeLoading"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <div
                  class="custom-tree-node"
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                  "
                >
                  <span
                    class="iconfont icon-a-jiafangzijianzhu icon-padding"
                    v-if="data.deviceType === 0"
                  ></span>
                  <span
                    class="iconfont icon-loudong icon-padding"
                    v-if="data.deviceType === 1"
                  ></span>
                  <span
                    class="iconfont icon-a-homezhuyefangzijia icon-padding"
                    v-if="data.deviceType === 2"
                  ></span>
                  <span>{{ node.label }}</span>
                  <!-- <span v-if="data.deviceCount!=null" class="device-count">({{data.deviceCount}})</span> -->
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </el-col>

      <!--户表用量数据-->
      <el-col :span="20" style="height: 100%; background-color: #ffffff">
        <div style="width: 100%; margin: 10px 5px 10px 0">
          <el-row class="line-bottom" v-show="showSearch">
            <el-col class="form_col">
              <el-form
                :model="queryParams"
                ref="queryForm"
                :size="formItemSize"
                v-show="showSearch"
                :label-width="labelWidth"
              >
                <div
                  id="searchFilter"
                  style="display: flex; justify-content: start; flex-wrap: wrap"
                >
                  <el-form-item label="统计类型" prop="userId">
                    <el-radio-group
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="queryParams.frozenType"
                      @change="handleFrozenTypeChange"
                    >
                      <!-- <el-radio-button label="day">日</el-radio-button> -->
                      <el-radio-button label="month">月</el-radio-button>
                      <!-- <el-radio-button label="year" :disabled="queryParams.energyUseClassification === '1'">年</el-radio-button> -->
                      <el-radio-button label="year">年</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="能耗分类" prop="energyUseClassification">
                    <el-select
                      :size="formItemSize"
                      v-model="queryParams.energyUseClassification"
                      placeholder="请选择能耗分类"
                      filterable
                      @keyup.enter.native="handleQuery"
                      @change="(val) => changeEnergyUseClassification(val)"
                    >
                      <el-option
                        v-for="dict in dict.type.energy_use_classification"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        :selected="dict.value === 1"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="能耗分项" prop="energyUseItem">
                    <el-select
                      :size="formItemSize"
                      v-model="queryParams.energyUseItem"
                      placeholder="请选择能耗分项"
                      clearable
                      filterable
                      @keyup.enter.native="handleQuery"
                    >
                      <el-option
                        v-for="dict in dict.type[
                          energyUseClassification === '1'
                            ? 'energy_use_item'
                            : 'energy_use_item_water'
                        ]"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="冻结时间"
                    prop="timevalue"
                    v-if="queryParams.frozenType === 'day'"
                  >
                    <el-date-picker
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="timevalue"
                      type="date"
                      value-format="yyyy-MM-dd"
                      :clearable="false"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                  <el-form-item
                    label="冻结时间"
                    prop="timevalue"
                    v-if="queryParams.frozenType === 'month'"
                  >
                    <el-date-picker
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="timevalue"
                      :clearable="false"
                      type="month"
                      value-format="yyyy-MM"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item
                    label="冻结时间"
                    prop="timevalue"
                    v-if="queryParams.frozenType === 'year'"
                  >
                    <el-date-picker
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="timevalue"
                      :clearable="false"
                      type="year"
                      value-format="yyyy"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="设备编号" prop="terminalId">
                    <el-input
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="queryParams.terminalId"
                      placeholder="输入设备编号"
                      clearable
                    />
                  </el-form-item>
                  <!-- <el-form-item label="用户编号" prop="userId">
                    <el-input
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="queryParams.userId"
                      placeholder="输入用户编号"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item> -->
                  <!-- <el-form-item label="用户名称" prop="userName">
                    <el-input
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="queryParams.userName"
                      placeholder="输入用户名称"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item> -->

                  <el-form-item
                    v-if="changeShowData === 'water'"
                    label="表解析地址"
                    prop="communicateAddress"
                  >
                    <el-input
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="queryParams.communicateAddress"
                      placeholder="输入表解析地址"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="changeShowData === 'power'"
                    label="表解析地址"
                    prop="communicateAddress"
                  >
                    <el-input
                      :size="formItemSize"
                      style="width: 100%"
                      v-model="queryParams.communicateAddress"
                      placeholder="输入表解析地址"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                </div>
              </el-form>
            </el-col>

            <el-col class="form_query">
              <el-button
                v-show="collapseAble"
                type="text"
                size="mini"
                @click="shiftCollapseAble"
                class="text"
              >
                <span>
                  {{ fold ? "收起筛选" : "更多筛选" }}
                </span>
              </el-button>
              <el-button
                type="primary"
                @click="handleAdd"
                size="mini"
                plain
                icon="el-icon-plus"
                >手动录入</el-button
              >
              <el-button type="primary" @click="handleQuery" size="mini"
                >查询</el-button
              >
              <el-button @click="resetQuery" size="mini">重置</el-button>
              <RightDropdown
                :dayColumns="dayColumns"
                v-if="queryParams.frozenType === 'day'"
                :queryVisible="false"
                :showSearch.sync="showSearch"
                @queryTable="getList"
                @export="handleExport"
                class="ml10"
              ></RightDropdown>
              <RightDropdown
                :dayColumns="dayColumns"
                v-if="queryParams.frozenType === 'month'"
                :showSearch.sync="showSearch"
                @queryTable="getList"
                @export="handleExport"
                class="ml10"
              ></RightDropdown>
              <RightDropdown
                :dayColumns="dayColumns"
                v-if="queryParams.frozenType === 'year'"
                :showSearch.sync="showSearch"
                @queryTable="getList"
                @export="handleExport"
                class="ml10"
              ></RightDropdown>
            </el-col>
          </el-row>
          <el-row>
            <el-table
              v-loading="loading"
              :data="dayDataList"
              size="mini"
              border
              ref="dayTable"
              key="dayTable"
              v-if="
                queryParams.frozenType === 'day' && changeShowData === 'water'
              "
              :default-sort="defaultSort"
              @sort-change="handleSorterChange"
              :height="getAvailableHeight"
            >
              <el-table-column
                v-for="item in dayColumns"
                :key="item.key"
                :prop="item.dataIndex"
                align="center"
                :sortable="item.sortable"
                :sort-orders="item.sortOrders"
                :show-overflow-tooltip="true"
                :label="item.label"
                v-if="item.visible"
              >
              </el-table-column>
            </el-table>

            <el-table
              v-loading="loading"
              :data="monthDataList"
              size="mini"
              border
              ref="monthTable"
              key="monthTable"
              v-if="
                queryParams.frozenType === 'month' && changeShowData === 'water'
              "
              :default-sort="defaultSort"
              @sort-change="handleSorterChange"
              :height="getAvailableHeight"
            >
              <el-table-column
                v-for="item in dayColumns"
                :key="item.key"
                :prop="item.dataIndex"
                align="center"
                :sortable="item.sortable"
                :sort-orders="item.sortOrders"
                :sort-by	="item.sortBy"
                :show-overflow-tooltip="true"
                :label="item.label"
                v-if="item.visible"
              />
            </el-table>

            <el-table
              v-loading="loading"
              :data="electricityDayDataList"
              size="mini"
              border
              ref="electricityDayTable"
              key="electricityDayTable"
              v-if="
                changeShowData === 'power' && queryParams.frozenType === 'day'
              "
              :default-sort="defaultSort"
              @sort-change="handleSorterChange"
              :height="getAvailableHeight"
            >
              <el-table-column
                v-for="item in electricityColumns"
                :key="item.key"
                :prop="item.dataIndex"
                align="center"
                :sortable="item.sortable"
                :sort-orders="item.sortOrders"
                :sort-by	="item.sortBy"
                :show-overflow-tooltip="true"
                :label="item.label"
                v-if="item.visible"
              />
            </el-table>

            <el-table
              v-loading="loading"
              :data="electricityMonthDataList"
              size="mini"
              border
              ref="electricityMonthTable"
              key="electricityMonthTable"
              v-if="
                changeShowData === 'power' && queryParams.frozenType === 'month'
              "
              :default-sort="defaultSort"
              @sort-change="handleSorterChange"
              :height="getAvailableHeight"
            >
              <el-table-column
                v-for="item in electricityColumns"
                :key="item.key"
                :prop="item.dataIndex"
                align="center"
                :sortable="item.sortable"
                :sort-orders="item.sortOrders"
                 :sort-by	="item.sortBy"
                :show-overflow-tooltip="true"
                :label="item.label"
                v-if="item.visible"
              />
            </el-table>

            <el-table
              v-loading="loading"
              :data="electricityYearDataList"
              size="mini"
              border
              ref="electricityYearTable"
              key="electricityYearTable"
              v-if="
                changeShowData === 'power' && queryParams.frozenType === 'year'
              "
              :default-sort="defaultSort"
              @sort-change="handleSorterChange"
              :height="getAvailableHeight"
            >
              <el-table-column
                v-for="item in electricityColumns"
                :key="item.key"
                :prop="item.dataIndex"
                align="center"
                :sortable="item.sortable"
                :sort-orders="item.sortOrders"
                :show-overflow-tooltip="true"
                :sort-by	="item.sortBy"
                :label="item.label"
                v-if="item.visible"
              />
            </el-table>
            <pagination
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-row>
        </div>


          <!-- 添加或修改能耗分项监控对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          width="920px"
          append-to-body
          label-width="120px"
        >
          <el-form
            ref="formXb"
            :model="form"
            :rules="rules"
            label-width="160px"
            :style="dynamicFormStyle"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="能耗分类" prop="energyUseClassification">
                  <el-select
                    :size="formItemSizeAdd"
                    v-model="form.energyUseClassification"
                    placeholder="请选择能耗分类"
                    filterable
                    style="width: 100%;"
                    @change="(val) => changeEnergyUseClassificationForm(val)"
                  >
                    <el-option
                      v-for="dict in dict.type.energy_use_classification"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                      :selected="dict.value === '1'"
                    >
                      <!-- {{dict}} -->
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="0">
                <el-form-item prop="supplierId">
                  <el-input
                    :size="formItemSizeAdd"
                    v-model="form.supplierId"
                    type="hidden"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="0">
                <el-form-item prop="locationNb">
                  <el-input
                    :size="formItemSizeAdd"
                    v-model="form.locationNb"
                    type="hidden"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="0">
                <el-form-item prop="tenantId">
                  <el-input
                    :size="formItemSizeAdd"
                    v-model="form.tenantId"
                    type="hidden"
                  ></el-input>
                </el-form-item>
              </el-col>

               <el-col :span="0">
                <el-form-item prop="frozenType">
                  <el-input
                    :size="formItemSizeAdd"
                    v-model="form.frozenType"
                    type="hidden"
                  ></el-input>
                </el-form-item>
              </el-col>
     

              <el-col :span="12">
                  <el-form-item
                    label="冻结月份"
                    prop="freezeTime"
                  >
                     <el-date-picker
                      :size="formItemSizeAdd"
                      style="width: 100%"
                      v-model="form.freezeTime"
                      :clearable="true"
                      type="month"
                      placeholder="选择冻结月份"
                      value-format="yyyy-MM"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
            </el-row>


            
              <el-row>
                <el-col :span="12">
                  <el-form-item label="起始时间" prop="startReadingTime">
                    <el-date-picker
                      :size="formItemSizeAdd"
                      v-model="form.startReadingTime"
                      type="datetime"
                      placeholder="请选择起始时间"
                      style="width: 100%"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                 <el-form-item label="结束时间" prop="endReadingTime">
                    <el-date-picker
                      :size="formItemSizeAdd"
                      v-model="form.endReadingTime"
                      type="datetime"
                      placeholder="请选择结束时间"
                      style="width: 100%"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                  </el-form-item>
                </el-col>
              </el-row>



            <!-- 电表 -->
            <div v-if="form.energyUseClassification == 1">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户编号" prop="userId">
                    <el-select
                    :filter-method="dataFilter"
                      style="width: 100%;"
                      :size="formItemSizeAdd"
                      v-model="form.userId"   
                      placeholder="请选择用户"
                      filterable
                      clearable
                      @change="(val) => changeUserId(val)"
                    >
                      <el-option
                        v-for="userXb in userXbOption"
                        :key="userXb.id"
                        :label="userXb.userName"
                        :value="userXb.userId"
                      >
                        <span style="float: left">{{ userXb.userId }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ userXb.userName }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备编号" prop="terminalId">
                    <el-select
                    style="width: 100%;"
                      :size="formItemSizeAdd"
                      v-model="form.terminalId"
                      placeholder="请选择电表设备"
                      filterable
                      clearable
                      @change="(val) => changeTerminalId(val)"
                    >
                      <el-option
                        v-for="termianlxb in terminalXbElectricityOption"
                        :key="termianlxb.id"
                        :label="termianlxb.terminalId"
                        :value="termianlxb.terminalId"
                        @click.native="setHiddenParams(termianlxb)"
                      >
                        <span style="float: left">{{
                          termianlxb.terminalId
                        }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ termianlxb.imei }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="起始正向有功电能读数"
                    prop="startPositiveActiveEnergy"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.startPositiveActiveEnergy"
                      style="width: 100%;"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="结束正向有功电能读数"
                    prop="endPositiveActiveEnergy"
                  >
                    <el-input-number
                      
                      :size="formItemSizeAdd"
                      v-model="form.endPositiveActiveEnergy"
                      style="width: 100%;"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="正向有功电能用量"
                    prop="dosagePositiveActiveEnergy"
                  >
                    <el-input-number
                     
                      :size="formItemSizeAdd"
                      v-model="form.dosagePositiveActiveEnergy"
                      style="width: 100%;"
                      :precision="2"

                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="起始组合有功电能1"
                    prop="startCombinationActiveEnergy1"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.startCombinationActiveEnergy1"
                      style="width: 100%;"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="结束组合有功电能1"
                    prop="endCombinationActiveEnergy1"
                  >
                    <el-input-number
                     
                      :size="formItemSizeAdd"
                      v-model="form.endCombinationActiveEnergy1"
                      style="width: 100%;"
                      :precision="2"

                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="组合有功电能1用量"
                    prop="dosageCombinationActiveEnergy1"
                  >
                    <el-input-number
                      :size="formItemSizeAdd"
                      v-model="form.dosageCombinationActiveEnergy1"
                      style="width: 100%;"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>


              <!-- <el-row>
                <el-col :span="12">
                  <el-form-item
                    label="冻结月份"
                    prop="reverseActiveEnergy"
                  >
                     <el-date-picker
                      :size="formItemSizeAdd"
                      style="width: 100%"
                      v-model="form.combinationIdleEnergy1"
                      :clearable="true"
                      type="month"
                      placeholder="选择冻结月份"
                      value-format="yyyy-MM"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row> -->


            
            </div>

            <!-- 水表  -->
            <div v-else-if="form.energyUseClassification == 2">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户编号" prop="userId">
                    <el-select
                    :filter-method="dataFilter"
                      :size="formItemSizeAdd"
                      v-model="form.userId"
                      placeholder="请选择用户"
                      filterable
                      clearable
                       style="width: 100%;"
                      @change="(val) => changeUserId(val)"
                    >
                      <el-option
                        v-for="userXb in userXbOption"
                        :key="userXb.id"
                        :label="userXb.userName"
                        :value="userXb.userId"
                      >
                        <span style="float: left">{{ userXb.userId }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ userXb.userName }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备编号" prop="terminalId">
                    <el-select
                      :size="formItemSizeAdd"
                      v-model="form.terminalId"
                      placeholder="请选择水表设备"
                       style="width: 100%;"
                      filterable
                      clearable
                      @change="(val) => changeTerminalId(val)"
                    >
                      <el-option
                        v-for="termianlxb in terminalXbOption"
                        :key="termianlxb.id"
                        :label="termianlxb.terminalId"
                        :value="termianlxb.terminalId"
                        @click.native="setHiddenParams(termianlxb)"
                      >
                        <span style="float: left">{{
                          termianlxb.terminalId
                        }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >{{ termianlxb.imei }}</span
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="起始抄表读数" prop="startReading">
                    <el-input-number
                     style="width: 100%;"
                    :size="formItemSizeAdd"
                      v-model="form.startReading"
                      
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="终止抄表读数" prop="endReading">
                    <el-input-number
                     style="width: 100%;"
                    :size="formItemSizeAdd"
                      v-model="form.endReading"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

               <el-row>
                <el-col :span="12">
                  <el-form-item label="用量" prop="cumulativeFlow">
                    <el-input-number
                    :size="formItemSizeAdd"
                      v-model="form.cumulativeFlow"
                      style="width: 100%;"
                      :precision="2"
                      :step="0.01"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>


      </el-col>
    </el-row>
  </div>
</template>

<script>

import { addElectricityTerminalsFreezeXb } from "@/api/datastatistics/electricity/electricityTerminalsFreezeXb";
import { addTerminalsfreezexb } from "@/api/dataquery/metered/terminalsfreezexb";



import { listUsersxbAll } from "@/api/record/usersxb";
import { listElectricityTerminalsXbAll } from "@/api/basedata/elecTerminalXb";
import { listTerminalxbAll } from "@/api/record/terminalxb";


import { getAreaTree } from "@/api/tree/index";
import { getDosageList } from "@/api/datastatistics/meterread/daymonthdosage.js";
import { getElectricityDosageList } from "@/api/datastatistics/meterread/daymonthdosage.js";
import moment from "moment";
import { listMeterSheetsTree } from "@/api/basedata/meterSheets";

export default {
  name: "DeviceUsage",
  dicts: [
    "energy_use_classification",
    "energy_use_item",
    "energy_use_item_water",
  ],
  data() {
     var validateEndTime = (rule, value, callback) => {
        const { startReadingTime } = this.form;
        // 若结束时间为空，直接通过（非空校验单独处理）
        if (!value) {
          return callback();
        }
        // 若开始时间为空，提示先选择开始时间
        if (!startReadingTime) {
          return callback(new Error("请先选择起始时间"));
        }
        // 转换为时间戳比较（注意：字符串格式需一致，如 "YYYY-MM-DD HH:mm:ss"）
        const start = new Date(startReadingTime).getTime();
        const end = new Date(value).getTime();
        if (end <= start) {
          callback(new Error("结束时间必须晚于起始时间"));
        } else {
          callback(); // 校验通过
        }
      };

    return {
      userXbOption: [],
      userXbOptionCopy: [],
      // 设备下拉框中的数据  水表
      terminalXbOption: [],
      // 设备下拉框中的数据  电表
      terminalXbElectricityOption: [],


      formItemSizeAdd: "default",
      DbShow:false,

      title: "",
      // 是否显示弹出层
      open: false,
      form: {},
      rules: {
        energyUseClassification: [
            { required: true, message: "能耗分类不能为空", trigger: "blur" },
          ],
        freezeTime: [
            { required: true, message: "冻结月份不能为空", trigger: "blur" },
          ],

        startReadingTime: [
            { required: true, message: "起始时间不能为空", trigger: "blur" },
          ],
        endReadingTime: [
            { required: true, message: "结束时间不能为空", trigger: "blur" },
             
            { validator: validateEndTime, trigger: "blur" }, // 绑定自定义校验
          ],

        userId: [
            { required: true, message: "用户编号不能为空", trigger: "change" },
          ],
          terminalId: [
            { required: true, message: "设备编号不能为空", trigger: "blur" },
          ],
          startPositiveActiveEnergy: [
            { required: true, message: "起始正向有功电能读数不能为空", trigger: "change" },
          ],
          endPositiveActiveEnergy: [
            {
              required: true,
              message: "结束正向有功电能读数不能为空",
              trigger: "blur",
            },
          ],

          dosagePositiveActiveEnergy: [
            {
              required: true,
              message: "正向有功电能用量不能为空",
              trigger: "blur",
            },
          ],
          startCombinationActiveEnergy1: [
            {
              required: true,
              message: "起始组合有功电能1不能为空",
              trigger: "blur",
            },
          ],  
          
          endCombinationActiveEnergy1: [
            {
              required: true,
              message: "结束组合有功电能1不能为空",
              trigger: "blur",
            },
          ],   

           dosageCombinationActiveEnergy1: [
            {
              required: true,
              message: "组合有功电能1用量不能为空",
              trigger: "blur",
            },
          ],  


          
      },


      defaultExpandedKeys: [],
      screenHeight: null,
      // 表格数据
      dayDataList: [],
      // 列信息
      dayColumns: [
        {
          key: 0,
          label: `区域名称`,
          visible: true,
          dataIndex: "sheetsName",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
          sortBy: "r.sheets_name",
        },
         {
          key: 2,
          label: `设备编号`,
          visible: true,
          dataIndex: "terminalId",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
          sortBy: "t.terminal_id",
        },
        // {
        //   key: 6,
        //   label: `用户编号`,
        //   visible: true,
        //   dataIndex: "userId",
        //   sortable: "custom",
        //   sortOrders: ["ascending", "descending"],
        //   sortBy: "u.user_id",
        // },
        // {
        //   key: 7,
        //   label: `用户名称`,
        //   visible: true,
        //   dataIndex: "userName",
        //   sortable: "custom",
        //   sortOrders: ["ascending", "descending"],
        //   sortBy: "u.user_name",
        // },

        {
          key: 1,
          label: `冻结日期`,
          visible: true,
          dataIndex: "freezeTime",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
        },
       {
          key: 14,
          label: `上期读数(m³)`,
          visible: true,
          dataIndex: "startReading",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
          sortBy: "tf.start_reading",
        },

        {
          key: 4,
          label: `冻结读数(m³)`,
          visible: true,
          dataIndex: "endReading",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
          sortBy: "tf.end_reading",
        },
         {
          key: 3,
          label: `用量`,
          visible: true,
          dataIndex: "cumulativeFlow",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
          sortBy: "tf.cumulative_flow",
        },
        {
          key: 5,
          label: `表解析地址`,
          visible: true,
          dataIndex: "communicateAddress",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
          sortBy: "t.communicate_address",
        },
      ],
      monthDataList: [],
      // monthColumns: [
      //   {
      //     key: 0,
      //     label: `区域名称`,
      //     visible: true,
      //     dataIndex: 'sheetsName',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending']
      //   },
      //   {
      //     key: 1,
      //     label: `冻结日期`,
      //     visible: true,
      //     dataIndex: 'freezeTime',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending']
      //   },
      //   {
      //     key: 2,
      //     label: `设备编号`,
      //     visible: true,
      //     dataIndex: 'terminalId',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending'],
      //     sortBy: 't.terminal_id'
      //   },
      //   {
      //     key: 3,
      //     label: `月用量(m³)`,
      //     visible: true,
      //     dataIndex: 'cumulativeFlow',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending']
      //   },
      //   {
      //     key: 4,
      //     label: `冻结读数(m³)`,
      //     visible: true,
      //     dataIndex: 'endReading',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending']
      //   },
      //   {
      //     key: 5,
      //     label: `表解析地址`,
      //     visible: true,
      //     dataIndex: 'communicateAddress',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending']
      //   },
      //   {
      //     key: 6,
      //     label: `用户编号`,
      //     visible: true,
      //     dataIndex: 'userId',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending']
      //   },
      //   {
      //     key: 7,
      //     label: `用户名称`,
      //     visible: true,
      //     dataIndex: 'userName',
      //     sortable: 'custom',
      //     sortOrders: ['ascending', 'descending']
      //   },
      // ],
      electricityDayDataList: [],
      // electricityDayColumns: [],
      electricityMonthDataList: [],
      // electricityMonthColumns: [],
      electricityYearDataList: [],
      electricityColumns: [
        {
          key: 0,
          label: `区域名称`,
          visible: true,
          dataIndex: "sheetsName",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
        },
           {
          key: 2,
          label: `设备编号`,
          visible: true,
          dataIndex: "terminalId",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
          sortBy: "t.terminal_id",
        },

        // {
        //   key: 6,
        //   label: `用户编号`,
        //   visible: true,
        //   dataIndex: "userId",
        //   sortable: "custom",
        //   sortOrders: ["ascending", "descending"],
        // },
        // {
        //   key: 7,
        //   label: `用户名称`,
        //   visible: true,
        //   dataIndex: "userName",
        //   sortable: "custom",
        //   sortOrders: ["ascending", "descending"],
        // },
        {
          key: 1,
          label: `冻结日期`,
          visible: true,
          dataIndex: "freezeTime",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
        },
        {
          key: 14,
          label: `上期读数(m³)`,
          visible: true,
          dataIndex: 'startReading',
          sortable: 'custom',
          sortOrders: ['ascending', 'descending']
        },
        {
          key: 4,
          label: `冻结读数(m³)`,
          visible: true,
          dataIndex: 'endReading',
          sortable: 'custom',
          sortOrders: ['ascending', 'descending']
        },

        {
          key: 3,
          label: `用量`,
          visible: true,
          dataIndex: "cumulativeFlow",
          sortable: "custom",
          sortOrders: ["ascending", "descending"],
        },
        // {
        //   key: 4,
        //   label: `冻结读数(m³)`,
        //   visible: true,
        //   dataIndex: 'endReading',
        //   sortable: 'custom',
        //   sortOrders: ['ascending', 'descending']
        // },
        // {
        //   key: 5,
        //   label: `表解析地址`,
        //   visible: true,
        //   dataIndex: 'communicateAddress',
        //   sortable: 'custom',
        //   sortOrders: ['ascending', 'descending']
        // },
      ],
      // 默认排序
      defaultSort: { prop: "freezeTime", order: "descending" },
      size: "mini",
      collapseAble: false,
      fold: false,
      formItemSize: "mini",
      maxShow: 4,
      labelWidth: "90px",
      defaultProps: {
        children: "children",
        label: "sheetsName",
      },
      // 区域树选项
      sheetsTreeList: [],
      // 遮罩层
      treeLoading: true,
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        frozenType: "month",
        beginTime: moment().subtract(30, "days").format("YYYY-MM-DD"),
        endTime: moment().subtract(1, "days").format("YYYY-MM-DD"),
        userId: null,
        userName: null,
        terminalId: null,
        communicateAddress: null,
        systemFlag: null,
        loginUserId: null,
        sheetsCode: null,
        energyUseClassification: "1",
        energyUseItem: null,
      },
      // 总条数
      total: 0,
      showtime: true,
      // 冻结日期
      timevalue: moment().subtract(1, "days").format("YYYY-MM"),
      filterText: "",
      changeShowData: "power",
      energyUseClassification: 1,
    };
  },
  created() {
    this.screenHeight = document.body.clientHeight;
    this.tip();
    this.getTreeList();
  },
  computed: {
    dynamicFormStyle() {
      return this.form.energyUseClassification === '1'
      ? { overflowY: 'scroll', height: '420px' }
      : {};
  },
    getAvailableHeight() {
      return (
        this.screenHeight - (this.showSearch ? (this.fold ? 250 : 211) : 165)
      );
    },
    userId() {
      return this.$store.state.user.userId;
    },
    systemFlag() {
      return this.$store.state.user.systemFlag;
    },
  },
  mounted() {
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl();
    }
    this.$nextTick(() => {
      window.setTimeout(() => {
        this.handleQuery();
      }, 300);
    });
  },
  watch: {
    // 根据名称筛选区域树
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
     dataFilter(val) {
        if (val) { //val存在
          this.userXbOption = [];
          this.userXbOption = this.userXbOptionCopy.filter((item) => {
          if (!!~item.userName.indexOf(val) || !!~item.userName.toUpperCase().indexOf(val.toUpperCase())
             || !!~item.userId.indexOf(val) || !!~item.userId.toUpperCase().indexOf(val.toUpperCase()) ) {
                return true
             }
          })
        } else { //val为空时，还原数组
          this.userXbOption = this.userXbOptionCopy;
        }
        this.$forceUpdate();
      },
    


    // sychPositiveActiveEnergy(){
    //   this.form.positiveActiveEnergy = this.form.combinationActiveEnergy1
    // },
    // 获取所有客户
    getUserXbList() {
      listUsersxbAll().then((response) => {
        this.userXbOption = response.rows;
        this.userXbOptionCopy = response.rows;
      });
    },

    // 根据客户获取设备信息   水表
    getTerminalXbList() {
      listTerminalxbAll({
        userId: this.form.userId,
        systemFlag: this.systemFlag,
        loginUserId: this.loginUserId,
      }).then((response) => {
        this.terminalXbOption = response.rows;
      });
    },
    // 根据客户获取设备信息  电表
    getTerminalXbElectricityList() {
      listElectricityTerminalsXbAll({
        userId: this.form.userId,
      }).then((response) => {
        this.terminalXbElectricityOption = response.rows;
      });
    },

    // changeEnergyUseClassification(val) {
    //   this.energyUseClassification = val;
    // },

    changeEnergyUseClassificationForm(val) {
      this.form = {};
      // this.form.magnification= 1;
      this.form.reverseActiveEnergy= 0;
      this.form.energyUseClassification = val;
      this.getUserXbList();

      if (1 == val) {
        this.rules = {
           energyUseClassification: [
            { required: true, message: "能耗分类不能为空", trigger: "blur" },
          ],
        freezeTime: [
            { required: true, message: "冻结月份不能为空", trigger: "blur" },
          ],

        startReadingTime: [
            { required: true, message: "起始时间不能为空", trigger: "blur" },
          ],
        endReadingTime: [
            { required: true, message: "结束时间不能为空", trigger: "blur" },
             { validator: (rule, value, callback) => {
                   const { startReadingTime } = this.form;
                   // 若结束时间为空，直接通过（非空校验单独处理）
                   if (!value) {
                     return callback();
                   }
                   // 若开始时间为空，提示先选择开始时间
                   if (!startReadingTime) {
                     return callback(new Error("请先选择起始时间"));
                   }
                   // 转换为时间戳比较（注意：字符串格式需一致，如 "YYYY-MM-DD HH:mm:ss"）
                   const start = new Date(startReadingTime).getTime();
                   const end = new Date(value).getTime();
                   if (end <= start) {
                     callback(new Error("结束时间必须晚于起始时间"));
                   } else {
                     callback(); // 校验通过
                   }
                }
              
              , trigger: "blur" }, // 绑定自定义校验
          ],

        userId: [
            { required: true, message: "用户编号不能为空", trigger: "change" },
          ],
          terminalId: [
            { required: true, message: "设备编号不能为空", trigger: "blur" },
          ],
          startPositiveActiveEnergy: [
            { required: true, message: "起始正向有功电能读数不能为空", trigger: "change" },
          ],
          endPositiveActiveEnergy: [
            {
              required: true,
              message: "结束正向有功电能读数不能为空",
              trigger: "blur",
            },
          ],

          dosagePositiveActiveEnergy: [
            {
              required: true,
              message: "正向有功电能用量不能为空",
              trigger: "blur",
            },
          ],
          startCombinationActiveEnergy1: [
            {
              required: true,
              message: "起始组合有功电能1不能为空",
              trigger: "blur",
            },
          ],  
          
          endCombinationActiveEnergy1: [
            {
              required: true,
              message: "结束组合有功电能1不能为空",
              trigger: "blur",
            },
          ],   

           dosageCombinationActiveEnergy1: [
            {
              required: true,
              message: "组合有功电能1用量不能为空",
              trigger: "blur",
            },
          ],  
        };
      } else if (2 == val) {
        this.rules = {
         energyUseClassification: [
            { required: true, message: "能耗分类不能为空", trigger: "blur" },
          ],
        freezeTime: [
            { required: true, message: "冻结月份不能为空", trigger: "blur" },
          ],

        startReadingTime: [
            { required: true, message: "起始时间不能为空", trigger: "blur" },
          ],
        endReadingTime: [
            { required: true, message: "结束时间不能为空", trigger: "change" },
             { validator: (rule, value, callback) => {
                   const { startReadingTime } = this.form;
                   // 若结束时间为空，直接通过（非空校验单独处理）
                   if (!value) {
                     return callback();
                   }
                   // 若开始时间为空，提示先选择开始时间
                   if (!startReadingTime) {
                     return callback(new Error("请先选择起始时间"));
                   }
                   // 转换为时间戳比较（注意：字符串格式需一致，如 "YYYY-MM-DD HH:mm:ss"）
                   const start = new Date(startReadingTime).getTime();
                   const end = new Date(value).getTime();
                   if (end <= start) {
                     callback(new Error("结束时间必须晚于起始时间"));
                   } else {
                     callback(); // 校验通过
                   }
                }
              
              , trigger: "blur" }, // 绑定自定义校验
          ],

        userId: [
            { required: true, message: "用户编号不能为空", trigger: "change" },
          ],
          terminalId: [
            { required: true, message: "设备编号不能为空", trigger: "blur" },
          ],


          startReading: [
            { required: true, message: "起始抄表读数不能为空", trigger: "blur" },
          ],
          endReading: [
          { required: true, message: "终止抄表读数不能为空", trigger: "blur" },
          ],
          cumulativeFlow: [
          { required: true, message: "用量不能为空", trigger: "blur" },
          ],

        };
      }
    },

    changeUserId(val) {
      this.form.terminalId = null;
      if (!val) {
        this.terminalXbOption = [];
        this.terminalXbElectricityOption = [];
        return;
      }
      if (this.form.energyUseClassification == 1) {
        this.getTerminalXbElectricityList();
      } else {
        this.getTerminalXbList();
      }
    },
     setHiddenParams(item) {
      this.form.supplierId = item.supplierId;
      this.form.locationNb = item.locationNb;
      this.form.tenantId = item.tenantId;
    },


    changeTerminalId(val) {
      this.form.terminalId = val;
      // this.form.terminalId = val;

      this.form = Object.assign(
        {},
        {
          ...this.form,
        }
      );
    },







    /** 添加户表档案按钮操作 */
    handleAdd() {
      this.reset();
      this.getUserXbList();
      // this.showCommunicationType = false
      this.title = "添加设备用量数据";
      this.open = true;
      this.form.reverseActiveEnergy= 0;
      this.form.energyUseClassification = '1';

    },
     // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("formXb");
    },
    /** 已绑定提交按钮 */
    submitForm() {
      this.$refs["formXb"].validate((valid) => {
        if (valid) {
          if (this.title === "修改设备用量数据") {
            updateTerminalxb(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else if (this.title === "添加设备用量数据") {
            // var  _magnification = this.form.magnification ? this.form.magnification : 1;
            if (this.form.energyUseClassification == 1) {
              //电表
              addElectricityTerminalsFreezeXb(
              Object.assign(this.form, {
                frozenType:  'month',
                frequencyType:  1,
              })
            ).then((response) => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                })
                .catch((r) => {
                  console.error(r);
                  Message.error("新增失败，请联系管理员！");
                });
            } else {
              //水表
              addTerminalsfreezexb(
                Object.assign(this.form, {
                frozenType:  'month',
                frequencyType:  1,
              }))
                .then((response) => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                })
                .catch((r) => {
                  console.error(r);
                  Message.error("新增失败，请联系管理员！");
                });
            }
            // addTerminalxb(this.form).then((response) => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      });
    },




    changeEnergyUseClassification(val) {
      console.log(val + "，我是val");

      this.energyUseClassification = val;
    },
    // 监听冻结类型
    handleFrozenTypeChange(e) {
      if (e === "day") {
        this.timevalue = moment().subtract(1, "days").format("YYYY-MM-DD");
      } else if (e === "month") {
        this.timevalue = moment().subtract(1, "months").format("YYYY-MM");
      } else if (e === "year") {
        this.timevalue = moment().subtract(1, "years").format("YYYY");
      }
    },
    /** 排序触发事件 */
    handleSorterChange({ column, prop, order }) {
      // 使用列定义中的sortBy属性作为排序字段
      this.queryParams.orderByColumn = column.sortBy || prop;
      this.queryParams.isAsc = order;
      this.getList();
    },
    /** 检查设置排序字段 */
    checkSortColumn() {
      if (!this.queryParams.orderByColumn) {
        this.queryParams.orderByColumn = this.defaultSort.prop;
        this.queryParams.isAsc = this.defaultSort.order;
      }
    },
    init() {
      // 调用接口获取到数据后
      let _self = this;
      this.$nextTick(() => {
        window.setTimeout(() => {
          _self.$refs.dayTable.doLayout();
        }, 100);
      });
    },
    handleNodeClick(data) {
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let choiceCheck = this.$refs.tree.getCurrentKey();
      // if (choiceCheck) {
      //   this.queryParams.sheetsCode = choiceCheck
      //   this.queryParams.systemFlag = this.systemFlag
      //   this.queryParams.loginUserId = this.userId
      //   this.queryParams.pageNum = 1;
      //   if (this.timevalue.length > 0) {
      //     this.queryParams.beginTime = this.timevalue
      //     this.queryParams.endTime = this.timevalue
      //   }
      //   this.getList()
      // } else{
      //   this.$modal.msgWarning("请选择一个区域!")
      //   this.dayDataList = []
      //   this.monthDataList = []
      //   this.total = 0
      // }

      this.queryParams.sheetsCode = choiceCheck;
      this.queryParams.systemFlag = this.systemFlag;
      this.queryParams.loginUserId = this.userId;
      this.queryParams.pageNum = 1;
      if (this.timevalue.length > 0) {
        this.queryParams.beginTime = this.timevalue;
        this.queryParams.endTime = this.timevalue;
      }
      this.getList();
    },
    // 重置表单
    resetQuery() {
      this.$refs.tree.setCurrentKey(null);
      this.timevalue = moment().subtract(1, "days").format("YYYY-MM");
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        frozenType: "month",
        beginTime: moment().subtract(1, "days").format("YYYY-MM-DD"),
        endTime: moment().subtract(1, "days").format("YYYY-MM-DD"),
        userId: null,
        userName: null,
        terminalId: null,
        communicateAddress: null,
        systemFlag: null,
        loginUserId: null,
        sheetsCode: null,
        energyUseClassification: "2",
      };
      this.dayDataList = [];
      this.monthDataList = [];
      this.handleQuery();
    },
    // 获取表格数据
    async getList() {
      // if (!this.queryParams.sheetsCode) {
      //   return this.$message.warning('请选择一个区域查看数据!')
      // }

      this.checkSortColumn();
      this.loading = true;

      try {
        this.electricityYearDataList = [];
        this.electricityDayDataList = [];
        this.electricityMonthDataList = [];
        this.dayDataList = [];
        this.monthDataList = [];
        const isWater = this.energyUseClassification == 2;

        const apiMethod = isWater ? getDosageList : getElectricityDosageList;

        const response = await apiMethod(this.queryParams);

        if (response.code !== 200) {
          throw new Error("数据获取失败");
        }

        // 统一处理数据更新
        this.changeShowData = isWater ? "water" : "power";
        const dataMap = {
          day: isWater ? "dayDataList" : "electricityDayDataList",
          month: isWater ? "monthDataList" : "electricityMonthDataList",
          year: "electricityYearDataList",
        };

        if (this.queryParams.frozenType in dataMap) {
          this[dataMap[this.queryParams.frozenType]] = response.rows;
        }

        console.log(this.changeShowData);
        console.log(response.rows);

        this.total = response.total;

        // 等待DOM更新后重新计算表格布局
        await this.$nextTick();
        setTimeout(() => {
          // 根据当前显示的数据类型选择对应的表格引用
          const tableRef =
            this.queryParams.frozenType === "day"
              ? isWater
                ? "dayTable"
                : "electricityDayTable"
              : isWater
              ? "monthTable"
              : "electricityMonthTable";

          if (this.$refs[tableRef]) {
            this.$refs[tableRef].doLayout();
          }
        }, 100);
      } catch (error) {
        this.$modal.msgError("数据查看失败!");
        console.error("数据请求错误:", error);

        // 清空当前类型数据
        const clearMap = {
          day:
            this.queryParams.energyUseClassification === 2
              ? "dayDataList"
              : "electricityDayDataList",
          month:
            this.queryParams.energyUseClassification === 2
              ? "monthDataList"
              : "electricityMonthDataList",
          year: "electricityYearDataList",
        };
        this[clearMap[this.queryParams.frozenType]] = [];
      } finally {
        this.loading = false;
      }
    },
    // 页面提示信息
    tip() {
      //this.$modal.msgWarning("请选择一个区域查看数据!")
      this.loading = false;
    },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold;
      this.minShowControl();
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(
        `#searchFilter .el-form-item.el-form-item--${this.formItemSize}`
      );
      const len = group?.length ? group?.length : 0;
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold;
          }
        });
        this.collapseAble = true;
      } else {
        this.collapseAble = false;
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.sheetsName.indexOf(value) !== -1;
    },
    /** 查询区域树 */
    getTreeList() {
      this.treeLoading = true;
      // let treeType = "0,1"
      // getAreaTree(treeType).then(response => {
      //   this.sheetsTreeList = response.data;
      //   this.defaultExpandedKeys = [this.sheetsTreeList[0].sheetsCode];
      //   this.treeLoading = false;
      // });
      this.sheetsTreeList = JSON.parse(localStorage.getItem("meteredTreeData"));
      if (this.sheetsTreeList.length === 0) {
        this.treeLoading = false;
      } else {
        this.defaultExpandedKeys = [this.sheetsTreeList[0].sheetsCode];
        this.treeLoading = false;
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      debugger;
      if (this.queryParams.energyUseClassification == "2") {
        this.download(
          "datastatistics/terminalXbStatisticAnalysis/exportDayOrMonth",
          {
            ...this.queryParams,
          },
          `水表用量统计数据.xlsx`
        );
      } else {
        this.download(
          "datastatistics/electricityterminalXbStatisticAnalysis/exportDayOrMonth",
          {
            ...this.queryParams,
          },
          `电表用量统计数据.xlsx`
        );
      }
    },
  },
};
</script>
<style scoped lang="scss">
// 设置本身箭头为隐藏状态
::v-deep .el-tree-node__expand-icon {
  width: 20px;
  padding: 0;
  margin: 5px 0;

  svg {
    display: none;
    width: 0;
  }
}

// 虚线所需样式
::v-deep .treeCont {
  .el-tree-node {
    width: fit-content;
    min-width: var(--treeWidth);
  }
  .el-tree > .el-tree-node:before {
    //border-top: none;
    padding-left: 0px;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node__content {
    padding-left: 5px !important;
  }

  .el-tree-node__children {
    //overflow: visible !important;
    .el-tree-node {
      position: relative;
      padding-left: 5px;
    }
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    width: 4px;
  }

  .el-tree-node__children {
    padding-left: 18px;
  }

  .el-tree-node :last-child:before {
    height: 17px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
    top: 25px;
    width: 0px;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #c0c4cc;
    height: 100%;
    top: -3px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #c0c4cc;
    height: 0px;
    top: 13px;
    width: 16px;
  }
}

// 默认三角行换成加减号
::v-deep .treeCont {
  .el-tree-node__content > .el-tree-node__expand-icon {
    width: 16px;
    //width: 0px;
    padding: 0px;
    font-size: 16px !important;
    margin-right: 5px; //新增
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  //有子节点 且未展开
  .el-tree .el-tree-node__expand-icon:before {
    background: url("../../../assets/images/jia.png") no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  .custom-tree-node .el-icon svg {
    display: block !important;
    color: #000;
  }

  //有子节点 且已展开
  .el-tree .el-tree-node__expand-icon.expanded:before {
    background: url("../../../assets/images/jian.png") no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  //没有子节点
  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: none;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }
}
</style>
